<template>
  <div class='quer-setting'>
    <div class="ques-box">
      <ul class="operate-b">
        <li v-for="(item,index) in menuData" :key="index">
          <span class="label">{{item.label}}</span>
          <el-switch v-if="item.type=='switch'" :width="60" v-model="settingInfo[item.key]" @change="item.method" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          <el-select v-else-if="item.type=='select'" clearable filterable v-model="settingInfo[item.key]" placeholder="请选择">
            <el-option
              v-for="item in item.array"
              :key="item.value||item"
              :label="item.label||item"
              :value="item.value||item">
            </el-option>
          </el-select>

          <el-button v-else-if="item.type=='button'" :type="item.class">{{item.btnName}}</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      settingInfo: {
        num:30
      },
      menuData: [
        {key: "",label: "答题闯关",type: "switch",method: this.changeSwitch},
        {key: "num",label: "答题关数",type: "select",array:_g.getNumArray(50),method: this.changeSelect},
        {class:"primary",label: "答案显示",btnName:"显示",type: "button",method: this.changeSelect},
        {class:"info",label: "答题控制",btnName:"下一题",type: "button",method: this.changeSelect},
      ]
    };
  },
  methods: {
    changeSwitch() {
      console.log("改变switch");
    },
    changeSelect(){
      console.log("select");
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.quer-setting {
  height: 100%;
  flex-grow: 1;
  display: inherit;
  padding: 15px 20px;

  .ques-box {
    width: 100%;
    background-color: aliceblue;
    box-sizing: border-box;
    color: #999;
    position: relative;

    .operate-b{
      position: absolute;
      display: inline-block;
      width: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);

      >li{
        height: 40px;
        margin-bottom: 20px;
      }
    }
    .label{
      line-height: 40px;
      font-size: 20px;
      margin-right: 20px;
    }
  }
}
</style>